<template>
	<div id="indent">
		<el-container>
			<el-input v-model="userId" placeholder="请输入用户ID" :clearable="true"></el-input>
			<el-input v-model="number" placeholder="请输入订单编号" :clearable="true"></el-input>
			<el-date-picker v-model="value2" type="daterange" align="right" range-separator="至" start-placeholder="开始日期"
				end-placeholder="结束日期" :picker-options="pickerOptions" unlink-panels>
			</el-date-picker>
			<el-select v-model="ordersta" placeholder="请选择订单状态" :multiple="true">
				<el-option v-for="item in choice " :key="item.id" :label="item.label" :value="item.label">
				</el-option>
			</el-select>
			<el-button type="primary" icon="el-icon-search">查找</el-button>
			<download-excel :data="tableData" :fields="json_fields" name="indent-manage.xls">
				<el-button type="primary" icon="el-icon-download" style="margin-left: 10px;">导出</el-button>
			</download-excel>
		</el-container>
		<!-- 列表 -->
		<el-table border style="width: 97%;" :data="tableData" id="out-table">
			<el-table-column prop="orderSn" label="订单编号" width="200" align="center">
			</el-table-column>
			<el-table-column prop="userId" label="用户ID" align="center">
			</el-table-column>
			<el-table-column prop="orderStatus" label="订单状态" width="100" align="center">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.orderStatus">未付款</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="orderPrice" label="订单金额" align="center">
			</el-table-column>
			<el-table-column prop="actualPrice" label="支付金额" align="center">
			</el-table-column>
			<el-table-column prop="updateTime" label="支付时间" width="200" align="center">
			</el-table-column>
			<el-table-column prop="" label="物流单号" align="center">
			</el-table-column>
			<el-table-column prop="" label="物流渠道" align="center">
			</el-table-column>
			<el-table-column prop="" label="操作" align="center" width="240px">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="openDetail(scope.$index, scope.row)">详情</el-button>
					<el-button type="danger" size="mini">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 详情 -->
		<el-dialog title="订单详情" width="40%" :visible.sync="dialogFormVisible">
			<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm" id="printTest">
				<el-form-item label="订单编号" prop="orderSn" :label-width="formLabelWidth">
					<span>{{ruleForm.orderSn}}</span>
				</el-form-item>
				<el-form-item label="订单状态" prop="" :label-width="formLabelWidth">
					<el-tag size="small" v-if="ruleForm.orderStatus">未付款</el-tag>
				</el-form-item>
				<el-form-item label="订单用户" prop="" :label-width="formLabelWidth">
					<span>{{userData.nickname}}</span>
				</el-form-item>
				<el-form-item label="用户留言" prop="" :label-width="formLabelWidth">
					<span>{{ruleForm.message}}</span>
				</el-form-item>
				<el-form-item label="收货信息" prop="" :label-width="formLabelWidth">
					<span>(收货人) {{ruleForm.consignee}} (手机号) {{ruleForm.mobile}} (地址) {{ruleForm.address}}</span>
				</el-form-item>
				<el-form-item label="商品信息" prop="" :label-width="formLabelWidth">
				</el-form-item>
				<!-- 商品信息 -->
				<el-table :data="gridData" border style="width: 95%;margin-left: 0px;">
					<el-table-column prop="goodsName" label="商品名称" align="center">
					</el-table-column>
					<el-table-column prop="goodsId" label="商品编号" align="center">
					</el-table-column>
					<el-table-column prop="specifications" label="货品规格" align="center">
					</el-table-column>
					<el-table-column prop="price" label="货品价格" align="center">
					</el-table-column>
					<el-table-column prop="number" label="货品数量" align="center">
					</el-table-column>
					<el-table-column prop="picUrl" label="货品图片" align="center">
						<template slot-scope="scope">
							<img :src="scope.row.picUrl" style="width: 50px;height: 50px;" v-if="scope.row.picUrl">
						</template>
					</el-table-column>
				</el-table>
				<el-form-item label="费用信息" prop="" :label-width="formLabelWidth">
					<span>(实际费用){{ruleForm.orderPrice}}元 = (商品总价){{ruleForm.goodsPrice}}元 +
						(快递费用){{ruleForm.freightPrice}}元 - (优惠减免){{ruleForm.grouponPrice}}元 -
						(积分减免){{ruleForm.integralPrice}}元</span>
				</el-form-item>
				<el-form-item label="支付信息" prop="" :label-width="formLabelWidth">
					<span>（支付渠道）微信支付 （支付时间）</span>
				</el-form-item>
				<el-form-item label="快递信息" prop="" :label-width="formLabelWidth">
					<span>（快递公司）（快递单号） （发货时间）</span>
				</el-form-item>
				<el-form-item label="退款信息" prop="" :label-width="formLabelWidth">
					<span>（退款金额）元（退款类型）（退款备注）（退款时间）</span>
				</el-form-item>
				<el-form-item label="收货信息" prop="" :label-width="formLabelWidth">
					<span>（确认收货时间）</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible=false">取 消</el-button>
				<el-button type="primary" v-print="'#printTest'">打印</el-button>
			</div>
		</el-dialog>
		<!-- 分页 -->
		<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:page-sizes="[10, 20, 30, 40,50,100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>
	</div>
</template>

<script>
	import {
		ddanlist, //订单列表
		ddanxq,
		//分页
		ddanjfen,
		ddanfeng
	} from '@/api/http.js'
	export default {
		data() {
			return {
				tableData: [],
				userId: "", //输入用户id
				number: "", //订单编号
				value2: [], //日期
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				// 导出
				json_fields: {
					"订单编号": "orderSn",
					"用户ID": "userId",
					"订单状态": "orderStatus",
					"订单金额": "orderPrice",
					"支付金额": "actualPrice"
				},
				ordersta: [], //订单状态
				choice: [{
						id: 101,
						label: "未付款"
					},
					{
						id: 102,
						label: "用户取消"
					},
					{
						id: 103,
						label: "系统取消"
					},
					{
						id: 104,
						label: "已付款"
					},
					{
						id: 105,
						label: "申请退款"
					},
					{
						id: 106,
						label: "已退款"
					},
					{
						id: 107,
						label: "已发货"
					},
					{
						id: 108,
						label: "用户收货"
					},
					{
						id: 109,
						label: "系统收货"
					}
				],
				currentPage: 1,
				total: 0, //分页数据
				dialogFormVisible: false,
				// 详情
				formLabelWidth: '80px',
				ruleForm: {}, //详情数据
				gridData: [], //商品信息表格数据
				userData: {}, //订单用户
				dateTime: [] //时间
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			// 分页
			handleCurrentChange(page) {
				ddanjfen(page).then((res) => {
					this.tableData = res.data.data.list
				})
			},
			// 显示的分页总共几条数据
			handleSizeChange(num) {
				ddanfeng(num).then((res) => {
					this.tableData = res.data.data.list
				})
			},
			init() { //请求数据				
				ddanlist().then((res) => {
					// console.log(res)
					this.tableData = res.data.data.list
					this.total = res.data.data.total
				})
			},
			openDetail(index, row) {
				this.dialogFormVisible = true,
					ddanxq({
						id: row.id
					}).then((res) => {
						// console.log(res)
						this.ruleForm = res.data.data.order
						this.userData = res.data.data.user
						this.gridData = res.data.data.orderGoods
					})
			}
		}

	}
</script>

<style scoped="scoped">
	#indent .el-container {
		margin-top: 20px;
		margin-left: 20px;
	}

	#indent .el-input {
		width: 180px;
		margin-right: 5px;
	}

	#indent .el-select {
		margin: 0px 5px;
	}

	#indent .el-table {
		margin: 20px;
	}


	#indent .el-pagination {
		margin: 25px;

	}

	#indent .el-form-item__label {
		text-align: left;
		font-weight: bold;
	}

	#indent .el-form {
		width: 100%;
	}
</style>
